import React, { useState, useEffect } from 'react'
import {
    View,
    Text,
    ImageBackground,
    StyleSheet,
    Image,
    TextInput,
    Alert
} from 'react-native'
import { TouchableOpacity } from 'react-native-gesture-handler';
import '../../common/global'
import request from './fetch'
import { AsyncStorage } from 'react-native';

const Entry = ({ navigation }) => {
    const [value, onChangeVal] = React.useState('');
    const [text, onChangeText] = React.useState('');
    const [color, setColor] = useState('rgb(9,196,153)');
    const biao = '>>';

    const saveData = async (data) => {
        data = JSON.stringify(data);
        await AsyncStorage.setItem(
            'name',data
        );
    }

    

    function getLogin() {
        return request({
            url: '/loginIn ',
            method: 'post',
            data: {
                name: value,
                password: text
            }
        })
    }
    return (
        <ImageBackground source={require('../../Image/login.png')} style={styles.image}>
            <View style={styles.box}>
                <TextInput
                    style={styles.inp1}
                    placeholder="请输入用户名"
                    autoFocus
                    keyboardType="number-pad"
                    value={value}
                    onChangeText={
                        (tex) => { onChangeVal(tex), tex.length > 0 && text.length > 0 ? setColor('#34B9C0') : setColor('rgb(171,134,167)') }
                    }
                />
                <TextInput
                    style={styles.inp2}
                    placeholder="请输入密码"
                    textContentType="password"
                    keyboardType="default"
                    secureTextEntry={true}
                    onChangeText={(tex) => { onChangeText(tex), tex.length > 0 && value.length > 0 ? setColor('#34B9C0') : setColor('rgb(171,134,167)') }}
                    value={text}
                />
                <TouchableOpacity style={[styles.btn, { backgroundColor: color }]} onPress={ async() => {
                    
                    await getLogin().then( async(res)=>{
                        let flag = res.isOk;
                        if(flag){
                            await saveData(value);
                            navigation.navigate('tabnav');
                        }else{
                            Alert.alert('用户名或密码错误');
                        }
                        //清除缓存
                        AsyncStorage.removeItem('dongtai');
                        AsyncStorage.removeItem('dongComments');
                        AsyncStorage.removeItem('record');
                    });  
                }}>
                    <View style={styles.value}>
                        <Text style={styles.btnText}>提交</Text>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity style={{ marginTop: 10, display: 'flex', flexDirection: 'row', justifyContent: 'flex-end' }}
                    onPress={
                        async () => {
                            await AsyncStorage.setItem(
                                'playName',value
                            );

                            navigation.navigate('register');
                        }
                    }>
                    <Text>注册 {biao}</Text>
                </TouchableOpacity>
            </View>
        </ImageBackground>
    )
}

export default Entry

const styles = StyleSheet.create({
    image: {
        width: w,
        height: h,
    },
    box: {
        backgroundColor: '#FFF',
        width: 400,
        height: 250,
        marginTop: 350,
        marginLeft: 25,
        borderRadius: 30,
        display: 'flex',
        flexDirection: 'column',
        paddingLeft: 15,
        paddingRight: 15,
        paddingTop: 28
    },
    inp1: {
        backgroundColor: 'rgb(245,245,245)',
        borderRadius: 30,
        paddingLeft: 20,
    },
    inp2: {
        backgroundColor: 'rgb(245,245,245)',
        marginTop: 20,
        borderRadius: 30,
        paddingLeft: 20,
    },
    btn: {
        height: 45,
        borderRadius: 30,
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: 30,
        marginTop: 27,
    },
    btnText: {
        color: '#FFF',
        fontSize: 17,
    }
})

















// import React, { useState }  from 'react'
// import { View,
//     Text, 
//     ImageBackground,
//     StyleSheet,
//     Image,
//     TextInput
//  } from 'react-native'
// import { TouchableOpacity } from 'react-native-gesture-handler';
// import '../../common/global'

// const Entry = ({navigation}) => {
    // const [value, onChangeVal] = React.useState('');
    // const [text, onChangeText] = React.useState('');
//     const [color,setColor]=useState('rgba(0,0,0,0.8)')

    // function changColor(color){
    //     if(color=='rgb(0,0,0,0.8)'){
    //         return
    //     }if(color=='#34B9C0'){
    //         navigation.navigate('song')
    //     }

    // }
//     return (
//         <View style={styles.all}>
            // <View style={styles.welcomes}>
            //     <Text style={styles.welcome}>欢迎登录Release</Text>
            // </View>
            // <TextInput
            //     style={styles.inp}
            //     placeholder="请输入用户名"
            //     autoFocus
            //     keyboardType="number-pad"
            //     value={value}
            //     onChangeText={
            //         (tex)=>{onChangeVal(tex),tex.length>0 && text.length>0?setColor('#34B9C0'):setColor('rgb(0,0,0,0.8)')}
            //     }
            // />

            // <TextInput
            //     style={styles.inp}
            //     placeholder="请输入密码"
            //     textContentType="password"
            //     keyboardType="default"
            //     secureTextEntry={true}
            //     onChangeText={(tex)=>{onChangeText(tex),tex.length>0 && value.length>0?setColor('#34B9C0'):setColor('rgb(0,0,0,0.8)')}}
            //     value={text}
            // />
            // <TouchableOpacity style={[styles.btn,{backgroundColor:color}]} onPress={()=>{
            //     changColor(color);
            //     navigation.navigate('tabnav');
            // }}>
            //         <View style={styles.value}>
            //             <Text style={styles.btnText}>提交</Text>
            //         </View>
            // </TouchableOpacity>
//         </View>
//     )
// }

// export default Entry;


// const styles=StyleSheet.create({
//     all:{
//         backgroundColor: 'rgb(230,232,255)',
//         width:w,
//         height:h,
//         padding:20,
//     },
//     welcome:{
//         fontSize:35,
//         color:'black',
//         marginTop: 40,
//         textAlign: 'center',
//     },
//     inp:{
//         width:w-80,
//         marginLeft:20,
//         marginTop:20,
//         borderBottomColor:'rgb(146,146,155)',
//         borderBottomWidth:1,
//         fontSize:20,
//         color:'black'
//     },
//     value:{
//         width:100,
//         height:40,
//         position:'absolute',
//         left:'50%',
//         top:'50%',
//         marginTop:-20,
//         marginLeft:-50,

//     },
//     btn:{
//         width:w-160,
//         marginTop:40,
//         marginLeft:60,
//         height:50,
//         borderRadius:30,
//         // backgroundColor:'#34B9C0',
//         position:'relative'

//     },
//     btnText:{
//         color:'white',
//         fontSize:20,
//         width:50,
//         height:30,
//         marginTop:5,
//         marginLeft:25,

//     }
// })